{% extends "admin/base.html" %}
{% load static i18n %}

{% block title %}管理后台 | {% trans 'Site admin' %}{% endblock %}

{# 彻底覆盖并移除默认左侧边栏 #}
{% block nav-sidebar %}{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'vendor/bootstrap/bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'vendor/fontawesome/all.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/admin_business.css' %}">
  <link rel="stylesheet" href="{% static 'css/admin_custom.css' %}">
  <style>
    :root {
      --admin-primary: #4A90E2;
      --admin-gradient: linear-gradient(135deg, #1A2C5B 0%, #2A407A 100%);
    }
    .admin-navbar {
      background: var(--admin-gradient);
      color: #fff;
      padding: 0.5rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }
    .admin-navbar .brand {
      display: flex;
      align-items: center;
      font-weight: 600;
      letter-spacing: .5px;
    }
    .admin-navbar .brand i { margin-right: .5rem; }
    .admin-navbar a,
    .admin-navbar .dropdown-toggle { color: #eaf1ff; text-decoration: none; }
    .admin-navbar a:hover { color: #fff; }
    .content-wrapper { padding: 16px 16px 0 16px; }
    .admin-footer {
      margin-top: 24px;
      padding: 16px 0;
      text-align: center;
      color: #6c757d;
      border-top: 1px solid #eee;
      font-size: .9rem;
    }
    /* 取消左侧菜单栏并让内容区域全宽显示 */
    #nav-sidebar { display: none !important; }
    #content { margin-left: 0 !important; }
    .responsive #content { margin-left: 0 !important; }
    .dashboard #content { width: 100% !important; }

    /* 顶部右侧用户下拉：在深色背景下的样式优化 */
    .admin-navbar .dropdown-toggle { display: inline-flex; align-items: center; gap: .4rem; }
    .admin-navbar .avatar-circle {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(255,255,255,.15); color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 600;
    }
    .admin-navbar .dropdown-menu { border: none; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
    .admin-navbar .dropdown-item { display:flex; align-items:center; gap:.5rem; }
    .admin-navbar .dropdown-item i { width: 16px; text-align:center; }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
{% endblock %}

{% block branding %}
  <div class="admin-navbar">
    <div class="brand">
      <i class="fas fa-cubes"></i>
      <span>固定资产管理系统 · 管理后台</span>
    </div>
    <div class="d-flex align-items-center gap-2">
      {% if request.user.is_authenticated %}
        <div class="dropdown">
          <a id="adminUserDropdown" class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
            <span class="avatar-circle" aria-hidden="true">{{ request.user.username|first|upper }}</span>
            <span class="username">{{ request.user.username }}</span>
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="adminUserDropdown">
            <li class="dropdown-header small text-muted px-3">账户</li>
            <li>
              <a class="dropdown-item" href="{% url 'assets:profile_view' %}">
                <i class="fas fa-user"></i> 个人资料
              </a>
            </li>
            <li>
              <a class="dropdown-item" href="{% url 'assets:task_list' %}">
                <i class="fas fa-tasks"></i> 我的任务
              </a>
            </li>
            <li>
              <a class="dropdown-item" href="{% url 'admin:password_change' %}">
                <i class="fas fa-key"></i> 修改密码
              </a>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li class="dropdown-header small text-muted px-3">导航</li>
            <li><a class="dropdown-item" href="/admin/"><i class="fas fa-tachometer-alt"></i> 控制台</a></li>
            <li><a class="dropdown-item" href="/"><i class="fas fa-home"></i> 返回前台</a></li>
            <li><hr class="dropdown-divider"></li>
            <li>
              <a class="dropdown-item" href="{% url 'admin:logout' %}">
                <i class="fas fa-sign-out-alt"></i> {% trans 'Log out' %}
              </a>
            </li>
          </ul>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block nav-global %}
  <div id="nav-global" class="px-3 py-2" style="background:#f8f9fa;border-bottom:1px solid #eee;">
    <div class="d-flex align-items-center justify-content-between">
      <div class="text-muted small">
        <i class="fas fa-info-circle me-1"></i>
        欢迎使用管理后台。请通过上方快捷操作或下方模块进入各业务功能。
      </div>
      <div class="d-flex align-items-center gap-2">
        <a class="btn btn-sm btn-outline-primary" href="/" target="_blank">
          <i class="fas fa-external-link-alt me-1"></i> 网站首页
        </a>
        <a class="btn btn-sm btn-outline-secondary" href="{% url 'admin:password_change' %}">
          <i class="fas fa-key me-1"></i> 修改密码
        </a>
      </div>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="content-wrapper">
    {{ block.super }}
  </div>
  <div class="admin-footer">
    © {% now "Y" %} 固定资产管理系统 · 管理后台
  </div>
{% endblock %}

{% block footer %}
  {{ block.super }}
  <script src="{% static 'vendor/bootstrap/bootstrap.bundle.min.js' %}"></script>
  <script>
    // 下拉增强：键盘可用性和打开时聚焦
    (function(){
      const trigger = document.getElementById('adminUserDropdown');
      if (!trigger || !window.bootstrap) return;
      const menu = trigger.nextElementSibling;
      const dd = new bootstrap.Dropdown(trigger, { autoClose: true });

      // Enter/Space 打开并聚焦第一个可用项
      trigger.addEventListener('keydown', function(e){
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          dd.show();
          setTimeout(()=>{
            const firstItem = menu && menu.querySelector('a.dropdown-item');
            firstItem && firstItem.focus();
          }, 10);
        }
      });
      // Esc 关闭
      menu && menu.addEventListener('keydown', function(e){
        if (e.key === 'Escape') {
          dd.hide();
          trigger.focus();
        }
      });
    })();
  </script>
{% endblock %}